<template>
    <el-row class="purchase">
        <el-row>
            <SelectCondition @setCondition="setCondition" @exportItems="exportItems" :accountFlag="false"
                tableType="material" />
        </el-row>
        <el-row>
            <DataTable v-loading="tableLoading" :data-list="dataTable" :eng-th="engTh" v-if="showTable.show"
                @showJournalList="showJournalList" ref="dataTableRef" />
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-pagination :total="pageInfo.total" background layout="total, sizes, prev, pager, next"
                :page-size="pageInfo.pageSize" :current-page="pageInfo.pageIndex" :page-sizes="[10, 20, 30, 40]"
                @size-change="pageSizeChange" @current-change="selectData" style="float: right;"></el-pagination>
        </el-row>
    </el-row>
</template>

<script setup lang="ts">
import { Ref, onMounted, ref } from "vue";
import { QueryParams } from "@/requests/request";
import { matAllQuery } from '@/requests/api/material';
import { queryJournalByBusinessId } from "@/requests/api/transcation-query-service";
import { usePagination } from "@/hooks/usePagination"

import SelectCondition from './SelectCondition.vue';
import DataTable from './DataTable.vue';
import { engThInit } from "./data";

onMounted(() => {
    // selectData();
})
const showTable = ref({ show: true });
const queryParams: Ref<QueryParams> = ref({
    pageIndex: 1,
    pageSize: 10,
    condition: {
        "organizationCode": "",
        "materialCode": "",
        "costTypeId": 0
    }
})

const { dataTable, engTh,
    pageInfo,
    pageSizeChange,
    selectData, tableLoading } = usePagination(queryParams, matAllQuery, engThInit)
//设置条件值
const setCondition = (selectCondition: any) => {
    console.log('查询条件', selectCondition)
    if (queryParams.value.condition) {
        const { costTypeId, organizationCode, materialCode } = selectCondition
        queryParams.value.condition.organizationCode = organizationCode;
        queryParams.value.condition.costTypeId = costTypeId;
        queryParams.value.condition.materialCode = materialCode;
    }
    selectData(1);
}

let journalTable = ref({
    dataList: [],
    engTh: [],
    show: false
});
let businessIdValue: Ref<string | undefined> = ref()
const showJournalList = async (businessId: string) => {
    console.log('子组件事件', typeof (businessId))
    businessIdValue.value = businessId
    journalTable.value.dataList = [];
    let journalEntryResult = await queryJournalByBusinessId(businessId, {});
    const data = journalEntryResult.data as any as never[]
    if (data.length > 0) {
        journalTable.value.engTh = Object.keys(data[0]) as any as never[];
        console.log('表头', data, engTh.value)
    }
    journalTable.value.dataList = data;
    journalTable.value.show = true;
}
const dataTableRef: Ref<InstanceType<typeof DataTable> | null> = ref(null)
const exportItems = () => {
    dataTableRef.value?.exportItems()
}

</script>

<style lang="scss" scoped></style>